import React from 'react'
import '../assets/css/coupon.css'
import { LeftOutline, DownOutline } from 'antd-mobile-icons'
import { CapsuleTabs } from 'antd-mobile'
import { getcoupon } from '../request/api'
class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            getcou: [],
            getcou1: [],
            getcou2: []
        }
    }
    componentDidMount() {
        getcoupon()
            .then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.setState({
                        getcou: res.data.list[0].content,
                        getcou1: res.data.list[1].content,
                        getcou2: res.data.list[2].content
                    })
                }
            })
    }
    render() {
        const { getcou,getcou1,getcou2 } = this.state
        return (<div>

            <div className="headertop">
                <LeftOutline fontSize={20} color='white' className='LeftOutline'  />
                <h1>优惠券</h1>
            </div>
            <CapsuleTabs>
                <CapsuleTabs.Tab title='未使用' key='fruits'>
                    {
                        getcou.map((item) => {
                            return (
                                <div className="box" key={item.id}>
                                    <div className="many">
                                        <div className='couleft'>
                                            <i>￥</i> <span>{item.money}</span>
                                            <p>满{item.limit_money}元可用</p>
                                        </div>
                                        <div className='couright'>
                                            <p className='p1'>{item.title}</p>
                                            <p className='p2'>2021.01.25至2021.</p>
                                        </div>
                                    </div>
                                    <span className='p3'>{item.description}  </span > <DownOutline />
                                </div>
                            )

                        })
                    }

                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='已使用' key='vegetables'>
                {
                        getcou1.map((item) => {
                            return (
                                <div className="box" key={item.id}>
                                    <div className="many">
                                        <div className='couleft'>
                                            <i>￥</i> <span>{item.money}</span>
                                            <p>满{item.limit_money}元可用</p>
                                        </div>
                                        <div className='couright'>
                                            <p className='p1'>{item.title}</p>
                                            <p className='p2'>2021.01.25至2021.</p>
                                        </div>
                                    </div>
                                    <span className='p3'>{item.description}  </span > <DownOutline />
                                </div>
                            )

                        })
                    }
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='已失效' key='animals'>
                {
                        getcou2.map((item) => {
                            return (
                                <div className="box" key={item.id}>
                                    <div className="many">
                                        <div className='couleft'>
                                            <i>￥</i> <span>{item.money}</span>
                                            <p>满{item.limit_money}元可用</p>
                                        </div>
                                        <div className='couright'>
                                            <p className='p1'>{item.title}</p>
                                            <p className='p2'>2021.01.25至2021.</p>
                                        </div>
                                    </div>
                                    <span className='p3'>{item.description}  </span > <DownOutline />
                                </div>
                            )

                        })
                    }
                </CapsuleTabs.Tab>
            </CapsuleTabs>

        </div>)
    }
}
export default Home